<html>
<head>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=0">
    <title>TX Log Messages</title>
    <style>
        body {
            background-color: #1E1E1E;
            font-family: Arial, Helvetica, Sans-Serif;
            Color: #69cbf7;
        }

        textarea {
            background-color: #252525;
            Color: #C5C5C5;
            border-radius: 5px;
            border: none;
        }
    </style>
    <script>
        var websock;
        function start() {
            document.getElementById("logField").scrollTop = document.getElementById("logField").scrollHeight;
            websock = new WebSocket('ws://' + window.location.hostname + ':81/');
            websock.onopen = function (evt) { console.log('websock open'); };
            websock.onclose = function(e) {
              console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
              setTimeout(function() {
                start();
              }, 1000);
            };
            websock.onerror = function (evt) { console.log(evt); };
            websock.onmessage = function (evt) {
                console.log(evt);
                var d = new Date();
                var n = d.toISOString();
                document.getElementById("logField").value += n + ' ' + evt.data + '\n';
                document.getElementById("logField").scrollTop = document.getElementById("logField").scrollHeight;
            };
        }

        function saveTextAsFile() {
            var textToWrite = document.getElementById('logField').innerHTML;
            var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
            var fileNameToSaveAs = "tx_log.txt";

            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.innerHTML = "Download File";
            if (window.webkitURL != null) {
                // Chrome allows the link to be clicked without actually adding it to the DOM.
                downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
            } else {
                // Firefox requires the link to be added to the DOM before it can be clicked.
                downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                downloadLink.onclick = destroyClickedElement;
                downloadLink.style.display = "none";
                document.body.appendChild(downloadLink);
            }

            downloadLink.click();
        }

        function destroyClickedElement(event) {
            // remove the link from the DOM
            document.body.removeChild(event.target);
        }
    </script>
</head>

<body onload="javascript:start();">
    <center>
        <h1>TX Log Messages</h1>
        The following command can be used to connect to the websocket using curl, which is a lot faster over the terminal than Chrome. <br> Alternatively, you can use the textfield below to view messages.
        <br><br>
        <textarea id="curlCmd" rows="40" cols="100" style="margin: 0px; height: 170px; width: 968px;">
curl --include \
     --output - \
     --no-buffer \
     --header "Connection: Upgrade" \
     --header "Upgrade: websocket" \
     --header "Host: example.com:80" \
     --header "Origin: http://example.com:80" \
     --header "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" \
     --header "Sec-WebSocket-Version: 13" \
     http://elrs_tx.local:81/
    </textarea>
    <br><br>
        <textarea id="logField" rows="40" cols="100" style="margin: 0px; height: 621px; width: 968px;">BEGIN LOG
</textarea>
        <br><br>
        <button type="button" onclick="saveTextAsFile()" value="save" id="save">Save log to file...</button>
        <br><br>
		
	<h1>Danger Zone</h1>
	Update ESP8266 module and R9M Firmware<br><br>
	<b>ESP8266 Flashing:</b><br>
	Select new .bin and press 'Upload and Flash Self'<br>
	<br>
	<b>R9M Flashing:</b><br>
	Select new .bin and press 'Upload and Flash R9M'<br><br><br>
    <form method='POST' action='/update' enctype='multipart/form-data'>
         Self Firmware:
         <input type='file' accept='.bin' name='firmware'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
         <input type='submit' value='Upload and Flash Self'>
    </form>
	<br>
    <form method='POST' action='/upload' enctype='multipart/form-data'>
         R9M Firmware: 
         <input type='file' accept='.bin' name='filesystem'>
         <input type='submit' value='Upload and Flash R9M'>
    </form>
	</center>
	
</body>
</html>